<!DOCTYPE html>
<html>
<head>
    

    

    



    <meta charset="utf-8">
    
    
    
    
    <title>js高程读书笔记（1章-5章） | Anson&#39;s Blog | 种一棵树最好的时间在十年前，其次是现在。</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    
    <meta name="theme-color" content="#3F51B5">
    
    
    <meta name="keywords" content="JavaScript,读书笔记">
    <meta name="description" content="第一章，JavaScript简介1.JavaScript包含三个部分，ECMAScript，DOM，BOM。ECMAScript是JavaScript的核心，包括语法，类型，语句，关键字，保留字，操作符，对象。 ２.ECMAScript提供核心语言功能。DOM提供访问和操作网页内容的方法和接口。BOM提供与浏览器交互的方法和接口。 ３.DOM包含DOM１、DOM２、DOM３。  DOM１由两个模块">
<meta name="keywords" content="JavaScript,读书笔记">
<meta property="og:type" content="article">
<meta property="og:title" content="js高程读书笔记（1章-5章）">
<meta property="og:url" content="http://yoursite.com/2018/06/22/js高程读书笔记（1-5）/index.html">
<meta property="og:site_name" content="Anson&#39;s Blog">
<meta property="og:description" content="第一章，JavaScript简介1.JavaScript包含三个部分，ECMAScript，DOM，BOM。ECMAScript是JavaScript的核心，包括语法，类型，语句，关键字，保留字，操作符，对象。 ２.ECMAScript提供核心语言功能。DOM提供访问和操作网页内容的方法和接口。BOM提供与浏览器交互的方法和接口。 ３.DOM包含DOM１、DOM２、DOM３。  DOM１由两个模块">
<meta property="og:locale" content="zh-CN">
<meta property="og:updated_time" content="2018-10-19T09:07:05.885Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="js高程读书笔记（1章-5章）">
<meta name="twitter:description" content="第一章，JavaScript简介1.JavaScript包含三个部分，ECMAScript，DOM，BOM。ECMAScript是JavaScript的核心，包括语法，类型，语句，关键字，保留字，操作符，对象。 ２.ECMAScript提供核心语言功能。DOM提供访问和操作网页内容的方法和接口。BOM提供与浏览器交互的方法和接口。 ３.DOM包含DOM１、DOM２、DOM３。  DOM１由两个模块">
    
        <link rel="alternate" type="application/atom+xml" title="Anson&#39;s Blog" href="/atom.xml">
    
    <link rel="shortcut icon" href="/img/favicon.ico">
    <link rel="stylesheet" href="//unpkg.com/hexo-theme-material-indigo@latest/css/style.css">
    <script>window.lazyScripts=[]</script>

    <!-- custom head -->
    

</head>

<body>
    <div id="loading" class="active"></div>

    <aside id="menu"  >
  <div class="inner flex-row-vertical">
    <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light" id="menu-off">
        <i class="icon icon-lg icon-close"></i>
    </a>
    <div class="brand-wrap" style="background-image:url(/img/brand.jpg)">
      <div class="brand">
        <a href="/" class="avatar waves-effect waves-circle waves-light">
          <img src="https://yscoder.github.io/img/face.jpg">
        </a>
        <hgroup class="introduce">
          <h5 class="nickname">张宁乐</h5>
          <a href="mailto:zhangningle2017@gmail.com" title="zhangningle2017@gmail.com" class="mail">zhangningle2017@gmail.com</a>
        </hgroup>
      </div>
    </div>
    <div class="scroll-wrap flex-col">
      <ul class="nav">
        
            <li class="waves-block waves-effect">
              <a href="/"  >
                <i class="icon icon-lg icon-home"></i>
                主页
              </a>
            </li>
        
            <li class="waves-block waves-effect">
              <a href="/archives"  >
                <i class="icon icon-lg icon-archives"></i>
                归档
              </a>
            </li>
        
            <li class="waves-block waves-effect">
              <a href="/tags"  >
                <i class="icon icon-lg icon-tags"></i>
                标签
              </a>
            </li>
        
            <li class="waves-block waves-effect">
              <a href="/about"  >
                <i class="icon icon-lg icon-user"></i>
                关于
              </a>
            </li>
        
            <li class="waves-block waves-effect">
              <a href="https://github.com/ansonznl" target="_blank" >
                <i class="icon icon-lg icon-github"></i>
                Github
              </a>
            </li>
        
      </ul>
    </div>
  </div>
</aside>

    <main id="main">
        <header class="top-header" id="header">
    <div class="flex-row">
        <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light on" id="menu-toggle">
          <i class="icon icon-lg icon-navicon"></i>
        </a>
        <div class="flex-col header-title ellipsis">js高程读书笔记（1章-5章）</div>
        
        <div class="search-wrap" id="search-wrap">
            <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light" id="back">
                <i class="icon icon-lg icon-chevron-left"></i>
            </a>
            <input type="text" id="key" class="search-input" autocomplete="off" placeholder="输入感兴趣的关键字">
            <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light" id="search">
                <i class="icon icon-lg icon-search"></i>
            </a>
        </div>
        
        
        <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light" id="menuShare">
            <i class="icon icon-lg icon-share-alt"></i>
        </a>
        
    </div>
</header>
<header class="content-header post-header">

    <div class="container fade-scale">
        <h1 class="title">js高程读书笔记（1章-5章）</h1>
        <h5 class="subtitle">
            
                <time datetime="2018-06-22T14:45:23.000Z" itemprop="datePublished" class="page-time">
  2018-06-22
</time>


            
        </h5>
    </div>

    


</header>


<div class="container body-wrap">
    
    <aside class="post-widget">
        <nav class="post-toc-wrap post-toc-shrink" id="post-toc">
            <h4>TOC</h4>
            <ol class="post-toc"><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#第一章，JavaScript简介"><span class="post-toc-number">1.</span> <span class="post-toc-text">第一章，JavaScript简介</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#第二章，在HTML中使用JavaScript"><span class="post-toc-number">2.</span> <span class="post-toc-text">第二章，在HTML中使用JavaScript</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#第三章，基本概念"><span class="post-toc-number">3.</span> <span class="post-toc-text">第三章，基本概念</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#1-ECMAScript数据类型"><span class="post-toc-number">3.1.</span> <span class="post-toc-text">1.  ECMAScript数据类型</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#2-操作符"><span class="post-toc-number">3.2.</span> <span class="post-toc-text">2.操作符</span></a></li></ol></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#第四章-变量，作用域和内存问题"><span class="post-toc-number">4.</span> <span class="post-toc-text">第四章 变量，作用域和内存问题</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#1-基本类型和引用类型的值"><span class="post-toc-number">4.1.</span> <span class="post-toc-text">1. 基本类型和引用类型的值</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#2-执行环境及作用域"><span class="post-toc-number">4.2.</span> <span class="post-toc-text">2. 执行环境及作用域</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#3-垃圾收集"><span class="post-toc-number">4.3.</span> <span class="post-toc-text">3. 垃圾收集</span></a></li></ol></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#第五章-引用类型"><span class="post-toc-number">5.</span> <span class="post-toc-text">第五章 引用类型</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#1-Object类型"><span class="post-toc-number">5.1.</span> <span class="post-toc-text">1. Object类型</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#2-Arrary类型"><span class="post-toc-number">5.2.</span> <span class="post-toc-text">2. Arrary类型</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#3-Data类型"><span class="post-toc-number">5.3.</span> <span class="post-toc-text">3. Data类型</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#4-RegExp类型"><span class="post-toc-number">5.4.</span> <span class="post-toc-text">4. RegExp类型</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#5-Function类型"><span class="post-toc-number">5.5.</span> <span class="post-toc-text">5.Function类型</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#6-基本包装类型"><span class="post-toc-number">5.6.</span> <span class="post-toc-text">6. 基本包装类型</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#7-单体内置对象"><span class="post-toc-number">5.7.</span> <span class="post-toc-text">7.单体内置对象</span></a></li></ol></li></ol>
        </nav>
    </aside>


<article id="post-js高程读书笔记（1-5）"
  class="post-article article-type-post fade" itemprop="blogPost">

    <div class="post-card">
        <h1 class="post-card-title">js高程读书笔记（1章-5章）</h1>
        <div class="post-meta">
            <time class="post-time" title="2018-06-22 22:45:23" datetime="2018-06-22T14:45:23.000Z"  itemprop="datePublished">
2018-06-22
<!--2018-10-19 17:07:05-->
</time>

            


            
<span id="busuanzi_container_page_pv" title="文章总阅读量" style='display:none'>
    <i class="icon icon-eye icon-pr"></i><span id="busuanzi_value_page_pv"></span>
</span>


        </div>
        <div class="post-content" id="post-content" itemprop="postContent">
            <h2 id="第一章，JavaScript简介"><a href="#第一章，JavaScript简介" class="headerlink" title="第一章，JavaScript简介"></a>第一章，JavaScript简介</h2><p>1.JavaScript包含三个部分，ECMAScript，DOM，BOM。<br>ECMAScript是JavaScript的核心，包括语法，类型，语句，关键字，保留字，操作符，对象。</p>
<p>２.ECMAScript提供核心语言功能。DOM提供访问和操作网页内容的方法和接口。BOM提供与浏览器交互的方法和接口。</p>
<p>３.DOM包含DOM１、DOM２、DOM３。</p>
<ul>
<li>DOM１由两个模块构成DOM核心和DOM HTML；</li>
<li>DOM２引入了DOM视图、DOM事件、DOM样式、DOM遍历和范围；</li>
<li>DOM３新增了验证文档的方式，并引入了已统一的方式加载和保存文档的方法。</li>
</ul>
<h2 id="第二章，在HTML中使用JavaScript"><a href="#第二章，在HTML中使用JavaScript" class="headerlink" title="第二章，在HTML中使用JavaScript"></a>第二章，在HTML中使用JavaScript</h2><p>在html中内嵌代码<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html&gt;</span><br><span class="line">  &lt;head&gt;</span><br><span class="line">    &lt;meta charset=&quot;utf-8&quot;&gt;</span><br><span class="line">    &lt;title&gt;holle world!&lt;/title&gt;</span><br><span class="line">  &lt;/head&gt;</span><br><span class="line">  &lt;body&gt;</span><br><span class="line">    &lt;p&gt;放到body的底部&lt;/p&gt;</span><br><span class="line">    &lt;script&gt;</span><br><span class="line">      alert(&quot;holle world!&quot;)</span><br><span class="line">    &lt;/script&gt;</span><br><span class="line">  &lt;/body&gt;</span><br><span class="line">&lt;/html&gt;</span><br></pre></td></tr></table></figure></p>
<p>外部引用文件<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html&gt;</span><br><span class="line">  &lt;head&gt;</span><br><span class="line">    &lt;meta charset=&quot;utf-8&quot;&gt;</span><br><span class="line">    &lt;title&gt;holle world!&lt;/title&gt;</span><br><span class="line">  &lt;/head&gt;</span><br><span class="line">  &lt;body&gt;</span><br><span class="line">    &lt;p&gt;放到body的底部&lt;/p&gt;</span><br><span class="line">    &lt;script src=&quot;xxx.js的路径&quot;&gt;&lt;script&gt;</span><br><span class="line">  &lt;/body&gt;</span><br><span class="line">&lt;/html&gt;</span><br></pre></td></tr></table></figure></p>
<h2 id="第三章，基本概念"><a href="#第三章，基本概念" class="headerlink" title="第三章，基本概念"></a>第三章，基本概念</h2><h3 id="1-ECMAScript数据类型"><a href="#1-ECMAScript数据类型" class="headerlink" title="1.  ECMAScript数据类型"></a>1.  ECMAScript数据类型</h3><p>1.1 有五种基本的数据类型：Undefined，Null，Boolean，Number，String，还有一种复杂的数据类型：Object。typeof可以确定数据类型。[ES6增加新类型：Symbol]</p>
<p>1.2 使用typeof操作符检测null值时会返回“object”，这是因为从逻辑角度来看null指示一个空对象指针。</p>
<p>1.3 Boolean类型的字面值true和false是区分大小写的。若想让其他类型的值转换为Boolean，可以调用转型函数Boolean()。</p>
<p>1.4 Number。八进制第一位必须是0，然后是八进制数字序列（0~7）。十六进制前两位必须是0x，后跟任何十六进制数字（0~9及A~F）。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">有三个函数可以把非数值转换为数值：Number(),parseInt(),parseFloat();</span><br></pre></td></tr></table></figure>
<table>
<thead>
<tr>
<th></th>
<th>转换八进制</th>
<th>转换十六进制</th>
<th>空字符</th>
<th>字符串</th>
</tr>
</thead>
<tbody>
<tr>
<td>Number()</td>
<td>忽略前导0，理解为十进制</td>
<td>转换为相同大小的十进制</td>
<td>转换为0</td>
<td>不全为数字的字符串会转换为NaN</td>
</tr>
<tr>
<td>parseInt()</td>
<td>转换为相同大小的十进制(在函数第二位加参数8)</td>
<td>转换为相同大小的十进制(在函数第二位加参数16)</td>
<td>转换为NaN</td>
<td>若遇到的第一个字符是数字字符，会一直解析直到遇到第一个非数字字符为止；若遇到的第一个字符为非数字字符，转化为NaN</td>
</tr>
<tr>
<td>parseFloat()</td>
<td>忽略前导0，理解为十进制</td>
<td>忽略前导0x，理解为十进制,转化为0</td>
<td>同上</td>
<td>同上</td>
</tr>
</tbody>
</table>
<p>1.5 String，字符串一旦创建，它的值就不能改变!!!改变的话也只是销毁之后重新创建。</p>
<p>1.6 将一个值转换为字符串，可以使用toString(),Null和Undefined类型没有这个方法。数值，对象，字符串，布尔值均有这个方法。数值调用toString()方法时，可以加参数2,8,10,16，表示转化为相应进制的字符串。</p>
<p>1.7 Object，Object的每个实例都具有以下的属性和方法。</p>
<table>
<thead>
<tr>
<th>属性和方法名</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>hasOwnProperty(propertyName)</td>
<td>用于检查给定属性在当前对象实例（而不是实例的原型中）是否存在。eg：o.hasOwnProperty(“name”)</td>
</tr>
<tr>
<td>isPrototypeOf(object)</td>
<td>用于检查传入的对象是否是传入对象的原型</td>
</tr>
<tr>
<td>propertyIsEnumerable(propertyName)</td>
<td>用于检查给定的属性是否能够使用for-in语句来枚举</td>
</tr>
</tbody>
</table>
<h3 id="2-操作符"><a href="#2-操作符" class="headerlink" title="2.操作符"></a>2.操作符</h3><p>2.1 任何操作数与NaN进行关系比较，结果都是false。大写字母的字符编码全部小于小写字母的字符编码。</p>
<p>2.2 相等和不相等（== ,!=）,强制转换再比较；全等和不全等（===,!==）,仅比较而不转换。</p>
<p>2.3 由于ECMAScript中不存在块级作用域，因此循环内部定义的变量可以在外部访问到。</p>
<p>2.4 for-in语句可以用来枚举对象的属性。</p>
<p>2.5 break和continue，一般情况下，break语句会立即退出循环，强制执行循环后面的语句，而continue语句虽然也是立即退出循环，但退出循环后会从循环的顶部继续执行。但是遇到与labe标签配合使用，一般发生在循环嵌套的情况下，break会退出到label标签的位置，而continue只是会退出内部循环，执行外部循环。</p>
<p>2.6 可以向ECMAScript函数传递任意数量的参数，并且可以通过arguments对象来访问参数数组。</p>
<p>2.7 ECMAScript没有重载。</p>
<h2 id="第四章-变量，作用域和内存问题"><a href="#第四章-变量，作用域和内存问题" class="headerlink" title="第四章 变量，作用域和内存问题"></a>第四章 变量，作用域和内存问题</h2><h3 id="1-基本类型和引用类型的值"><a href="#1-基本类型和引用类型的值" class="headerlink" title="1. 基本类型和引用类型的值"></a>1. 基本类型和引用类型的值</h3><p>1.1 ECMAScript变量可能包含两种不同类型的值：基本类型值和引用类型值，<strong>基本类型值</strong>指的是一个简单的数据段，五种基本数据类型Undifined,Null,Boolean,String,Number是<strong>按值访问</strong>的,因为可以操作保存在变量中的实际的值。<strong>引用类型</strong>的值是保存在内存中的对象，JS不允许直接访问内存中的位置，所以引用类型的值是按<strong>引用访问</strong>的。只有引用类型值可以动态地添加属性。</p>
<p>1.2 访问变量有按值和按引用两种方式，而<strong>参数只能按值传递</strong>。</p>
<p>1.3 <strong>检测类型</strong>，<strong>typeof</strong>,用于确定一个变量是字符串，数值，布尔值，对象还是Undefined的最佳工具。如果一个变量的值是Null或者是Object，则typeof都会返回“Object”。</p>
<p>1.4 <strong>instanceof</strong>用于确定一个值是哪种引用类型。若使用instanceof操作符检测基本类型值，则该操作符始终会返回false。</p>
<blockquote>
<p><code>alert(person instanceof Object);</code><br><code>alert(person instanceof Array);</code><br><code>alert(person instanceof RegExp);</code></p>
</blockquote>
<h3 id="2-执行环境及作用域"><a href="#2-执行环境及作用域" class="headerlink" title="2. 执行环境及作用域"></a>2. 执行环境及作用域</h3><p>2.1 在Web浏览器中，全局执行环境被认为是window对象。</p>
<p>2.2 在try-catch语句的catch块和with语句可以在作用域链的前端临时增加一个变量对象，会延长作用域链。</p>
<p>2.3 JS没有块级作用域，即在if和for语句中声明的变量，在其语句结束后不会销毁，会依旧存在于循环外部的执行环境中。</p>
<h3 id="3-垃圾收集"><a href="#3-垃圾收集" class="headerlink" title="3. 垃圾收集"></a>3. 垃圾收集</h3><p>3.1 JS中内存的分配以及无用内存的回收完全实现了自动管理。这种垃圾收集机制的原理是：找出不再使用的变量，然后释放其占用的内存。具体到浏览器，一般有两种实现方法：<strong>标记清除</strong>，<strong>引用计数</strong>。</p>
<p>3.2 JS中最常用的垃圾收集机制是标记清除。当变量进入环境时，就将这个变量标记为“进入环境”</p>
<p>3.3 <strong>内存管理</strong>，使用具备垃圾收集机制的语言编写程序，开发人员一般不必担心内存管理的问题。但是分配给Web浏览器的可用内存通常要比分配给桌面应用程序的少。</p>
<p>3.4 优化内存的最佳方式是：让执行中的代码只保存必要的数据。一旦数据不再使用，最好将其值设置为null来释放其引用。但是，解除一个值的引用并不意味着自动回收该值所占用的内存，<strong>解除引用</strong>的真正作用是让其值脱离执行环境，以便垃圾收集器下次运行时将其回收。</p>
<h2 id="第五章-引用类型"><a href="#第五章-引用类型" class="headerlink" title="第五章 引用类型"></a>第五章 引用类型</h2><p>引用类型与传统面向对象程序设计中的类类似，但实现不同。</p>
<h3 id="1-Object类型"><a href="#1-Object类型" class="headerlink" title="1. Object类型"></a>1. Object类型</h3><p>Object是一种基础类型，其他所有类型都从Object继承了基本的行为。</p>
<h3 id="2-Arrary类型"><a href="#2-Arrary类型" class="headerlink" title="2. Arrary类型"></a>2. Arrary类型</h3><p>2.1 Array类型的每一项可以保存任何类型的数据。数组的大小是可以动态调整的。</p>
<p>2.2 数组的length属性有个特点——它不是只读的。</p>
<p>2.3 <strong>检验数组</strong></p>
<blockquote>
<p>方法一：<code>value instanceof Array</code><br>方法二：<code>Array.isArray(value)</code></p>
</blockquote>
<p>2.4 <strong>转化方法</strong>：toString(),valueOf(),前者返回由数组中的每个值的字符串形式拼接而成的一个已逗号分隔的字符串。而后者还是返回的是一个数组。</p>
<p>2.5 <strong>栈方法</strong>和<strong>队列方法</strong>见<a href="http://blog.csdn.net/didiaidada/article/details/44243419" target="_blank" rel="noopener">这里</a>。</p>
<p>2.6 <strong>重排序方法</strong>：reverse()和sort(),前者只是反转数组。后者只是对字符串进行排序。若想比较大下，还得接受一个比较函数作为参数。</p>
<p>2.7 <strong>操作方法</strong></p>
<p>2.7.1 concat()方法可以基于当前数组中的所有项创建一个新数组。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">var  colors = [&quot;red&quot;,&quot;green&quot;];</span><br><span class="line">var colors2 = colors.concat(&quot;yellow&quot;,[&quot;black&quot;,&quot;brown&quot;]);</span><br></pre></td></tr></table></figure>
<p>2.7.2 slice()可以基于当前数组中的一个或多个创建一个新数组。该函数接受一个或者两个参数，即要返回项的起始和结束位置。该方法返回起始和结束位置之间的项，但是不包括结束位置的项。</p>
<p>2.7.3 splice()的功能很强大，可以实现数组中元素的删除,插入,替换。该方法接收两个或者三个参数，起始项的位置，要删除的个数，待插入的元素。</p>
<p>2.8 <strong>位置方法</strong>：ECMAScript5为数组实例添加两个位置方法：indeOf()和lastIndex(),前者从数组开头开始向后查找，后者从数组的末尾开始向前查找。这两个方法都接收两个参数：要查找的项和（可选的）表示查找起点位置的索引。未找到的话返回-1。</p>
<p>2.9 <strong>迭代方法</strong></p>
<table>
<thead>
<tr>
<th style="text-align:left">方法名</th>
<th style="text-align:left">解释(所有方法均运用于数组的每一项)</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left"><code>every()</code></td>
<td style="text-align:left">若该函数对每一项都返回true，则返回true</td>
</tr>
<tr>
<td style="text-align:left"><code>filter()</code></td>
<td style="text-align:left">返回该函数会返回true的项组成的数组</td>
</tr>
<tr>
<td style="text-align:left"><code>forEach()</code></td>
<td style="text-align:left">无返回值</td>
</tr>
<tr>
<td style="text-align:left"><code>map()</code></td>
<td style="text-align:left">返回每次函数调用的结果组成的数组</td>
</tr>
<tr>
<td style="text-align:left"><code>some()</code></td>
<td style="text-align:left">若该函数对某一项返回true，则返回true</td>
</tr>
</tbody>
</table>
<p>2.10 <strong>归并方法</strong>：reduce()和reduceRight(),这两个函数接收四个参数：前一个值，当前值，项的索引和数组对象。</p>
<h3 id="3-Data类型"><a href="#3-Data类型" class="headerlink" title="3. Data类型"></a>3. Data类型</h3><p>3.1 <code>var now = new Date();</code>新创建的对象会自动获取当前的日期和时间。</p>
<p>3.2 如果想根据特定的日期和时间创建日期对象，必须传入该日期的毫秒数。Date.parse()和Date.UTC()可以实现。</p>
<p>3.3 Date.now()返回表示调用这个方法时的日期和时间的毫秒数。</p>
<p>3.4 <strong>日期格式化方法</strong></p>
<table>
<thead>
<tr>
<th style="text-align:left">方法</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">toDateString()</td>
<td>以特定实现的格式显示星期几，月，日和年</td>
</tr>
<tr>
<td style="text-align:left">toTimeString()</td>
<td>以特定于实现的格式显示时，分，秒和时区</td>
</tr>
<tr>
<td style="text-align:left">toLocaleDateString()</td>
<td>以特定于地区的格式显示星期几，月，日和年</td>
</tr>
<tr>
<td style="text-align:left">toLocaleTimeString()</td>
<td>以特定于地区的格式显示时，分，秒和时区</td>
</tr>
</tbody>
</table>
<h3 id="4-RegExp类型"><a href="#4-RegExp类型" class="headerlink" title="4. RegExp类型"></a>4. RegExp类型</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">var expression = / pattern / flags</span><br></pre></td></tr></table></figure>
<p>4.1</p>
<table>
<thead>
<tr>
<th style="text-align:left">flags</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">g</td>
<td>即模式将被应用于所有字符串，而非在发现第一个匹配项时立即停止</td>
</tr>
<tr>
<td style="text-align:left">i</td>
<td>匹配时忽略模式与字符串的大小写</td>
</tr>
<tr>
<td style="text-align:left">m</td>
<td>表示多行模式，即在到达一行文本末尾时还会继续查找下一行中是否存在与模式匹配的项</td>
</tr>
</tbody>
</table>
<hr>
<p>4.2 RegExp对象的主要方法是<strong>exec()</strong>,该方法专门为捕获组而设计的。exec()接受一个参数，即要应用模式的字符串，然后返回包含第一个匹配项信息的数组。返回的数组包含两个额外的属性：index和input。index表示匹配项在字符串中的位置，而input表示应用正则表达式的字符串。</p>
<p>4.3 RegExp的第二个方法是<strong>text()</strong>,他接受一个字符串参数，在模式与该参数匹配的情况下返回true，否则返回false。</p>
<h3 id="5-Function类型"><a href="#5-Function类型" class="headerlink" title="5.Function类型"></a>5.Function类型</h3><p>5.1 函数实际也是对象，每个函数都是Function类型的实例。<strong>函数是对象，函数名是指针。</strong></p>
<p>5.2 <strong>JavaScript的函数没有重载</strong></p>
<p>5.3 JS中即使声明函数的代码在调用它的代码后面，JS也能把函数声明提升到顶部。</p>
<p>5.4 在函数内部，有两个特殊的对象：arguments和this。arguments的主要用途是保存函数的参数，但是它还有一个属性名叫<strong>callee</strong>，该属性是一个指针，指向拥有该arguments对象的函数。<strong>this引用的是函数据以执行的环境对象</strong></p>
<p>5.5 函数的对象的属性<strong>caller</strong>这个属性保存着调用当前函数的函数的引用。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">function outer()&#123;</span><br><span class="line">    inner();</span><br><span class="line">    &#125;</span><br><span class="line">function inner()&#123;</span><br><span class="line">    alert(inner.caller);//也可以是alert(arguments.callee.caller)</span><br><span class="line">    &#125;</span><br><span class="line">outer();//会弹出outer()函数的源代码</span><br></pre></td></tr></table></figure>
<p>5.6 每个函数都包含两个属性：length和prototype。其中length属性表示函数希望接收的命名参数的个数。<strong>prototype是保存函数所有实例方法（toString(),valueOf()）的真正所在</strong>。</p>
<p>5.7 每个函数都包含两个非继承而来的方法：<strong>apply()和call(),这两个方法的用途都是在特定的作用域中调用函数，实际上等于设置函数体内this的值</strong>，实际上，传递参数并非apply()和call()真正的用武之地，它们真正的强大的地方是能够扩充函数赖以运行的作用域。详细用例请点击<a href="http://blog.csdn.net/didiaidada/article/details/45558793" target="_blank" rel="noopener">这里</a>。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">window.color = &apos;red&apos;;</span><br><span class="line">var o = &#123; colar: &apos;blue&apos; &#125;;</span><br><span class="line"></span><br><span class="line">function sayColor()&#123;</span><br><span class="line">    alert(this.color);</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">sayColor();                //red</span><br><span class="line">sayColor.call(this);       //red</span><br><span class="line">sayColor.call(window);     //red</span><br><span class="line">sayColor.call(o);          //blue</span><br></pre></td></tr></table></figure>
<p><strong><em>使用call()或者apply()的最大好处是：对象不需要和方法有任何耦合关系。</em></strong></p>
<p>5.8 ECMAScript还定义了一个方法：bind(),这个方法会创建一个函数实例，其this的值会被绑定到传给bind()函数的参数值。</p>
<h3 id="6-基本包装类型"><a href="#6-基本包装类型" class="headerlink" title="6. 基本包装类型"></a>6. 基本包装类型</h3><blockquote>
<p>为了便于操作基本类型值，ECMAScript还提供了三个特殊引用类型：Boolean，Number和String。<br>引用类型与基本包装类型的主要区别就是对象的生存期。使用new操作符创建的引用类型的实例，在执行流离开当前作用域之前都一直保存在内存中。而自动创建的基本包装类型的对象，则只存在于一行代码的执行瞬间，然后立即被销毁。这就意味着我们不能再运行时为基本类型添加属性和方法。</p>
</blockquote>
<p>6.1 使用new调用基本包装类型的构造函数，与直接调用同名的转型函数是不一样的。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">var val = &apos;25&apos;;</span><br><span class="line">var val1 = Number(val);</span><br><span class="line">alert(typeof val1);          //number</span><br><span class="line"></span><br><span class="line">var val2 = new Number(val);</span><br><span class="line">alert(typeof val2);          //object  val2中保存的是Number的实例。</span><br></pre></td></tr></table></figure>
<p>6.2 <strong>字符串大小写转换方法</strong>，toLowerCase(),toLocalLowerCase(),toUpperCase(),toLocalUpperCase();</p>
<hr>
<p>2015年8月28号回家，今天9月6号，昨天到学校，刚刚写了好多，但是不小心按了backspace,全删了！！！消失的部分以后有心情再写吧</p>
<hr>
<p>6.3 <code>indexOf()</code>和<code>lastIndexOf()</code>返回待查找字符在字符串中的位置。</p>
<p>6.4 <code>trim()</code>方法会创建一个字符串副本，删除前置及后缀的所有空格，然后返回结果。</p>
<p>6.5 <strong>字符串模式匹配方法</strong></p>
<table>
<thead>
<tr>
<th style="text-align:left">方法名</th>
<th>参数</th>
<th>返回值</th>
<th>备注</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left"><code>match()</code></td>
<td>一个，正则表达式或者RegExp对象</td>
<td>匹配的结果构成的数组</td>
<td></td>
</tr>
<tr>
<td style="text-align:left"><code>search()</code></td>
<td>同上</td>
<td>返回字符串中第一个匹配项的索引</td>
<td></td>
</tr>
<tr>
<td style="text-align:left"><code>replace()</code></td>
<td>两个，第一个参数和上面的参数一样（也可以是字符串），第二参数是代替换的字符串（也可以是函数）</td>
<td>返回替换后的字符串</td>
<td></td>
</tr>
<tr>
<td style="text-align:left"><strong><code>split()</code></strong></td>
<td>两个，第一个参数可以是字符串，也可以是RegExp对象，是指定的分隔符。第二个参数用于指定数组的大小</td>
<td>通过字符串内包含的指定的分隔符，将字符串分割个多个子字符串，将结果返回在一个数组中</td>
<td>可以想象为将铅笔遮住字符串中所以与第一个参数匹配的字符，剩下没有被遮住的部分分别作为数组的每一项返回（可能包括字符串前后的空格）</td>
</tr>
<tr>
<td style="text-align:left"><code>localeCompare()</code></td>
<td>一个字符串</td>
<td>1（字符串参数在字母表中排在调用函数的字符串前面）；0（相等）；-1</td>
<td></td>
</tr>
<tr>
<td style="text-align:left"><code>fromCharCode()</code></td>
<td>一个或多个字符编码</td>
<td>返回对应的字符或字符串</td>
<td>—</td>
</tr>
</tbody>
</table>
<h3 id="7-单体内置对象"><a href="#7-单体内置对象" class="headerlink" title="7.单体内置对象"></a>7.单体内置对象</h3><p>7.1 <strong>内置对象</strong>：不必显示地实例化内置对象，因为他们已经实例化了。例如Object，Arrary，String。</p>
<p>7.2 <strong>单体内置对象</strong>：Globle，Math。</p>
<p>7.3 <strong>Globle对象</strong>：从某种意义上作为一个终极的“兜底儿对象”，事实上，没有全局变量和全局对象，所有在全局中定义的属性和方法，都是Globle对象的属性。</p>
<blockquote>
<p>URL编码方法</p>
<ol>
<li>encodeURL()和encodeURLComponent()方法可以对URL进行编码，以便发送给浏览器，有效的URL中不能包含某些字符，例如，空格。这两个方法用特殊的UTF-8编码替换所有无效的字符，从而让浏览器能够接受和理解。</li>
<li>两个方法中前者用于整个URL（一般只处理空格），后者用于URL的一段（处理所有非字母数字字符）</li>
<li>两个对应的解码分别为decodeURL()和decodeURLComponent()。</li>
</ol>
</blockquote>
<blockquote>
<p>eval()方法</p>
<p>eval()方法就像一个完整的ECMAScript解析器。</p>
</blockquote>
<blockquote>
<p>ECMAScript没有指出如何访问Globle()对象，但web浏览器都是将这个全局对象作为window对象的一部分加以实现。因此在全局作用域中声明的所有变量和函数，就都成了window对象的属性。</p>
</blockquote>
<p>7.4 <strong>Math()对象</strong></p>
<blockquote>
<p>Math对象的属性大都是数学计算中可能用到一些特殊值，例如：Math.PI</p>
</blockquote>
<blockquote>
<p>min()和max()</p>
<p>eg: <code>var max = Math.max(3,14,2,14);</code></p>
<p>eg: <code>var values = [1,2,3,4,5,6,7,8,9]; var max = Math.max.apply(Math, values); //Math作为第一个参数，从而正确的设置this的值</code></p>
</blockquote>
<blockquote>
<p>舍入方法</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&gt;         alert(Math.ceil(25.9));</span><br><span class="line">&gt;         alert(Math.ceil(25.5));</span><br><span class="line">&gt;         alert(Math.ceil(25.1));</span><br><span class="line">&gt;         //以上均输出26</span><br><span class="line">&gt;         alert(Math.floor(25.9));</span><br><span class="line">&gt;         alert(Math.floor(25.5));</span><br><span class="line">&gt;         alert(Math.floor(25.1));</span><br><span class="line">&gt;         //以上均输出25</span><br><span class="line">&gt;         alert(Math.round(25.9));</span><br><span class="line">&gt;         alert(Math.round(25.5));</span><br><span class="line">&gt;         alert(Math.round(25.1));</span><br><span class="line">&gt;         //前两项输出26，最后一项输出25，遵循四舍五入</span><br><span class="line">&gt;</span><br></pre></td></tr></table></figure>
</blockquote>
<blockquote>
<p>Math.random()方法：返回一个大于0小于1的随机数。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&gt; function selectFrom(lowValue, upperValue)&#123;</span><br><span class="line">&gt;             var choice = upperValue - lowValue + 1;</span><br><span class="line">&gt;             return Math.floor(Math.random()*choice + lowValue);</span><br><span class="line">&gt;         &#125;</span><br><span class="line">&gt;</span><br></pre></td></tr></table></figure>
</blockquote>
<blockquote>
<p>以上的这个 selectFrom(lowValue, upperValue)可以生成两个参数之间的任意一个随机整数。也可以用于返回数组中的任意一项。</p>
</blockquote>
<blockquote>
<p>其他方法<br>eg：Math.abs(num) 返回num的绝对值。</p>
</blockquote>
<p>内容出处: <a href="https://blog.csdn.net/didiaidada/article/details/48007449" target="_blank" rel="noopener">https://blog.csdn.net/didiaidada/article/details/48007449</a></p>
<p>因为最近也在读js高程 看了觉得总结的很好 自己也修改补充了一部分。可以没事的时候多看看。</p>

        </div>

        <blockquote class="post-copyright">
    
    <footer>
        <a href="http://yoursite.com">
            <img src="https://yscoder.github.io/img/face.jpg" alt="张宁乐">
            张宁乐
        </a>
    </footer>
</blockquote>

        


        <div class="post-footer">
            
	<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/JavaScript/">JavaScript</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/读书笔记/">读书笔记</a></li></ul>


            
<div class="page-share-wrap">
    

<div class="page-share" id="pageShare">
    <ul class="reset share-icons">
      <li>
        <a class="weibo share-sns" target="_blank" href="http://service.weibo.com/share/share.php?url=http://yoursite.com/2018/06/22/js高程读书笔记（1-5）/&title=《js高程读书笔记（1章-5章）》 — Anson's Blog&pic=https://yscoder.github.io/img/face.jpg" data-title="微博">
          <i class="icon icon-weibo"></i>
        </a>
      </li>
      <li>
        <a class="weixin share-sns wxFab" href="javascript:;" data-title="微信">
          <i class="icon icon-weixin"></i>
        </a>
      </li>
      <li>
        <a class="qq share-sns" target="_blank" href="http://connect.qq.com/widget/shareqq/index.html?url=http://yoursite.com/2018/06/22/js高程读书笔记（1-5）/&title=《js高程读书笔记（1章-5章）》 — Anson's Blog&source=张宁乐,博客" data-title=" QQ">
          <i class="icon icon-qq"></i>
        </a>
      </li>
      <li>
        <a class="facebook share-sns" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http://yoursite.com/2018/06/22/js高程读书笔记（1-5）/" data-title=" Facebook">
          <i class="icon icon-facebook"></i>
        </a>
      </li>
      <li>
        <a class="twitter share-sns" target="_blank" href="https://twitter.com/intent/tweet?text=《js高程读书笔记（1章-5章）》 — Anson's Blog&url=http://yoursite.com/2018/06/22/js高程读书笔记（1-5）/&via=http://yoursite.com" data-title=" Twitter">
          <i class="icon icon-twitter"></i>
        </a>
      </li>
      <li>
        <a class="google share-sns" target="_blank" href="https://plus.google.com/share?url=http://yoursite.com/2018/06/22/js高程读书笔记（1-5）/" data-title=" Google+">
          <i class="icon icon-google-plus"></i>
        </a>
      </li>
    </ul>
 </div>



    <a href="javascript:;" id="shareFab" class="page-share-fab waves-effect waves-circle">
        <i class="icon icon-share-alt icon-lg"></i>
    </a>
</div>



        </div>
    </div>

    
<nav class="post-nav flex-row flex-justify-between">
  
    <div class="waves-block waves-effect prev">
      <a href="/2018/06/30/使用Echarts.js绘制图表/" id="post-prev" class="post-nav-link">
        <div class="tips"><i class="icon icon-angle-left icon-lg icon-pr"></i> Prev</div>
        <h4 class="title">使用Echarts.js绘制图表</h4>
      </a>
    </div>
  

  
    <div class="waves-block waves-effect next">
      <a href="/2018/06/09/双向数据绑定的原理/" id="post-next" class="post-nav-link">
        <div class="tips">Next <i class="icon icon-angle-right icon-lg icon-pl"></i></div>
        <h4 class="title">双向数据绑定的原理</h4>
      </a>
    </div>
  
</nav>



    











    <!-- Valine Comments -->
    <div class="comments vcomment" id="comments"></div>
    <script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
    <script src="//unpkg.com/valine@latest/dist/Valine.min.js"></script>
    <!-- Valine Comments script -->
    <script>
        var GUEST_INFO = ['nick','mail','link'];
        var guest_info = 'nick,mail'.split(',').filter(function(item){
          return GUEST_INFO.indexOf(item) > -1
        });
        new Valine({
            el: '#comments',
            notify: 'false' == 'true',
            verify: 'false' == 'true',
            appId: "gbSwUaucLkuxqOLxm131Mg9U-gzGzoHsz",
            appKey: "b9xU2qIPrm06S0uymbAfrGMD",
            avatar: "mm",
            placeholder: "要不要说点什么？",
            guest_info: guest_info.length == 0 ? GUEST_INFO : guest_info,
            pageSize: "10"
        })
    </script>
    <!-- Valine Comments end -->







</article>



</div>

        <footer class="footer">
    <div class="top">
        
<p>
    <span id="busuanzi_container_site_uv" style='display:none'>
        站点总访客数：<span id="busuanzi_value_site_uv"></span>
    </span>
    <span id="busuanzi_container_site_pv" style='display:none'>
        站点总访问量：<span id="busuanzi_value_site_pv"></span>
    </span>
</p>


        <p>
            
                <span><a href="/atom.xml" target="_blank" class="rss" title="rss"><i class="icon icon-lg icon-rss"></i></a></span>
            
            <span>博客内容遵循 <a rel="license" href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh">知识共享 署名 - 非商业性 - 相同方式共享 4.0 国际协议</a></span>
        </p>
    </div>
    <div class="bottom">
        <p><span>张宁乐 &copy; 2017 - 2019</span>
            <span>
                
                Power by <a href="http://hexo.io/" target="_blank">Hexo</a> Theme <a href="https://github.com/yscoder/hexo-theme-indigo" target="_blank">indigo</a>
            </span>
			<span>
					Hosted by <a href="https://pages.coding.me" style="font-weight: bold">Coding Pages</a>
			  </span>
        </p>
    </div>
</footer>
<!-- <script>
(function(){
    var bp = document.createElement("script");
    var curProtocol = window.location.protocol.split(":")[0];
    if (curProtocol === "https") {
        bp.src = "https://zz.bdstatic.com/linksubmit/push.js";
    }
    else {
        bp.src = "http://push.zhanzhang.baidu.com/push.js";
    }
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(bp, s);
})();
</script> -->

    </main>
    <div class="mask" id="mask"></div>
<a href="javascript:;" id="gotop" class="waves-effect waves-circle waves-light"><span class="icon icon-lg icon-chevron-up"></span></a>



<div class="global-share" id="globalShare">
    <ul class="reset share-icons">
      <li>
        <a class="weibo share-sns" target="_blank" href="http://service.weibo.com/share/share.php?url=http://yoursite.com/2018/06/22/js高程读书笔记（1-5）/&title=《js高程读书笔记（1章-5章）》 — Anson's Blog&pic=https://yscoder.github.io/img/face.jpg" data-title="微博">
          <i class="icon icon-weibo"></i>
        </a>
      </li>
      <li>
        <a class="weixin share-sns wxFab" href="javascript:;" data-title="微信">
          <i class="icon icon-weixin"></i>
        </a>
      </li>
      <li>
        <a class="qq share-sns" target="_blank" href="http://connect.qq.com/widget/shareqq/index.html?url=http://yoursite.com/2018/06/22/js高程读书笔记（1-5）/&title=《js高程读书笔记（1章-5章）》 — Anson's Blog&source=张宁乐,博客" data-title=" QQ">
          <i class="icon icon-qq"></i>
        </a>
      </li>
      <li>
        <a class="facebook share-sns" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http://yoursite.com/2018/06/22/js高程读书笔记（1-5）/" data-title=" Facebook">
          <i class="icon icon-facebook"></i>
        </a>
      </li>
      <li>
        <a class="twitter share-sns" target="_blank" href="https://twitter.com/intent/tweet?text=《js高程读书笔记（1章-5章）》 — Anson's Blog&url=http://yoursite.com/2018/06/22/js高程读书笔记（1-5）/&via=http://yoursite.com" data-title=" Twitter">
          <i class="icon icon-twitter"></i>
        </a>
      </li>
      <li>
        <a class="google share-sns" target="_blank" href="https://plus.google.com/share?url=http://yoursite.com/2018/06/22/js高程读书笔记（1-5）/" data-title=" Google+">
          <i class="icon icon-google-plus"></i>
        </a>
      </li>
    </ul>
 </div>


<div class="page-modal wx-share" id="wxShare">
    <a class="close" href="javascript:;"><i class="icon icon-close"></i></a>
    <p>扫一扫，分享到微信</p>
    <img src="" alt="微信分享二维码">
</div>




    <script src="//cdn.bootcss.com/node-waves/0.7.4/waves.min.js"></script>
<script>
var BLOG = { ROOT: '/', SHARE: true, REWARD: false };


</script>

<script src="//unpkg.com/hexo-theme-material-indigo@latest/js/main.min.js"></script>


<div class="search-panel" id="search-panel">
    <ul class="search-result" id="search-result"></ul>
</div>
<template id="search-tpl">
<li class="item">
    <a href="{path}" class="waves-block waves-effect">
        <div class="title ellipsis" title="{title}">{title}</div>
        <div class="flex-row flex-middle">
            <div class="tags ellipsis">
                {tags}
            </div>
            <time class="flex-col time">{date}</time>
        </div>
    </a>
</li>
</template>

<script src="//unpkg.com/hexo-theme-material-indigo@latest/js/search.min.js" async></script>






<script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>





</body>
</html>
